<template>
  <div class="container">
    <h3>加载OpenStreet地图</h3>
    <div id="vue-openlayers" class="map-x"></div>
  </div>
</template>

<script>
import "ol/ol.css";
import Map from "ol/Map";
import View from "ol/View";
import TileLayer from "ol/layer/Tile";
import OSM from "ol/source/OSM";

export default {
  name: "FirstMap",
  data() {
    return {
      map: null,
    };
  },
  methods: {
    initMap() {
      this.map = new Map({
        target: "vue-openlayers",
        layers: [
          new TileLayer({
            source: new OSM(),
          }),
        ],
        view: new View({
          projection: "EPSG:4326",
          center: [114.064839, 22.548857],
          zoom: 10,
        }),
      });
    },
  },
  mounted() {
    this.initMap();
  },
  unmounted() {
    this.map = null;
  },
};
</script>

<style scoped>
.container {
  width: 840px;
  height: 570px;
  margin: 0 auto;
  border: 1px solid #43b983;
}

#vue-openlayers {
  width: 800px;
  height: 450px;
  margin: 0 auto;
  border: 1px solid #42b983;
  position: relative;
}

h3 {
  line-height: 40px;
}
</style>
